<template>
  <div class="main">
    <div class="left-card">
      <div style="background: #fff; padding: 10px">
        <div class="title">个人成就</div>
        <div style="border-bottom: 1px #a7a7a7 solid">
          <div class="tag" style="margin-top: 10px">
            <div class="icon"><img :src="like" alt="" style="width: 20px; height: 20px" /></div>
            <div>获得{{ titleUtil.numberTo(props.dataList.like) }}次点赞</div>
          </div>
          <div class="tag">
            <div class="icon"><img :src="review" alt="" style="width: 20px; height: 20px" /></div>
            <div>内容获得{{ titleUtil.numberTo(props.dataList.review) }}次评论</div>
          </div>
          <div class="tag">
            <div class="icon"><img :src="collect" alt="" style="width: 20px; height: 20px" /></div>
            <div>获得{{ titleUtil.numberTo(props.dataList.collect) }}次收藏</div>
          </div>
        </div>
        <div style="margin-top: 10px">
          <div style="display: flex">
            <div class="tag" style="width: 30px">
              <i class="iconfont icon-biaoqian"></i>
            </div>
            <div style="line-height: 40px">创作历程</div>
          </div>
          <div>
            <div class="year" v-for="(item, index) of props.dataList.year" :key="index">
              <div>{{ item.dataCount }}篇</div>
              <div style="color: #a7a7a7">{{ item.year }}年</div>
            </div>
          </div>
        </div>
      </div>
      <div style="background: #fff; padding: 10px; margin-top: 10px">
        <div class="title">兴趣领域</div>
        <div>
          <div v-for="(item, index) of props.dataList.interest" :key="index">
            <div style="height: 30px; line-height: 30px">{{ item.typeName }}</div>
            <div style="display: flex">
              <div class="tag" style="width: 30px"><i class="iconfont icon-icon-test6"></i></div>
              <div
                style="
                  line-height: 40px;
                  font-size: 12px;
                  color: #a7a7a7;
                  display: flex;
                  justify-content: space-between;
                "
              >
                <div style="margin-right: 10px">{{ item.tagsName }}</div>
                <div>{{ item.dataCount }}篇</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="background: #fff; padding: 10px; margin-top: 10px">
        <div class="title">系统公告</div>
        <div>
          <div v-for="item of props.dataList.notice" :key="item.id">
            <div class="tag">
              <div class="icon">
                <img :src="notice" alt="" style="width: 20px; height: 20px" />
              </div>
              <div class="notice">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-card">
      <div style="display: flex">
        <div
          class="menu"
          @click="handleClick('first')"
          :class="{ active: activeName === 'first' ? true : false }"
        >
          <span>最近</span>
        </div>
        <div
          class="menu"
          @click="handleClick('second')"
          :class="{ active: activeName === 'second' ? true : false }"
        >
          <span>文章</span>
        </div>
        <div
          class="menu"
          @click="handleClick('third')"
          :class="{ active: activeName === 'third' ? true : false }"
        >
          <span>收藏</span>
        </div>
        <div
          class="menu"
          @click="handleClick('fourth')"
          :class="{ active: activeName === 'fourth' ? true : false }"
        >
          <span>问答</span>
        </div>
        <div
          class="menu"
          @click="handleClick('fivth')"
          :class="{ active: activeName === 'fivth' ? true : false }"
        >
          <span>帖子</span>
        </div>
      </div>
      <DataCard
        :contentList="recentContent"
        :status="activeName"
        @sort="handlerSort"
        v-if="activeName === 'first' || activeName === 'second' ? true : false"
      ></DataCard>
      <DataCard
        :contentList="props.collectData.records"
        v-if="activeName === 'third' ? true : false"
      >
      </DataCard>
      <ReviewCard
        v-if="activeName === 'fourth' ? true : false"
        :dataList="props.reviewList"
      ></ReviewCard>
      <Community
        v-if="activeName === 'fivth' ? true : false"
        :dataList="props.communityList"
      ></Community>
    </div>
  </div>
</template>

<script setup>
import like from '@/assets/img/like.png'
import review from '@/assets/img/review.png'
import collect from '@/assets/img/collect.png'
import notice from '@/assets/img/notice.png'
import { ref } from 'vue'
import DataCard from './DataCard.vue'
import ReviewCard from './ReviewCard.vue'
import titleUtil from '@/util/titleUtil'
import Community from './Comunity.vue'

const emits = defineEmits(['collect'])
const activeName = ref('first')
const props = defineProps({
  dataList: {
    type: Object,
    required: true,
    default: () => ({}) // 提供一个安全的默认值
  },
  collectData: {
    type: Object,
    required: true,
    default: () => ({}) // 提供一个安全的默认值
  },
  reviewList: {
    type: Object,
    required: true,
    default: () => ({}) // 提供一个安全的默认值
  },
  communityList: {
    type: Array,
    required: true,
    default: () => []
  }
})

const recentContent = ref([])
recentContent.value = props.dataList.contents

const handleClick = (tab) => {
  if (tab === 'first') {
    activeName.value = 'first'
    recentContent.value = titleUtil.getThreeData(props.dataList.contents)
    console.log('>>>', recentContent.value)
  } else if (tab === 'second') {
    activeName.value = 'second'
    recentContent.value = props.dataList.contents
  } else if (tab === 'third') {
    activeName.value = 'third'
    emits('collect')
  } else if (tab === 'fourth') {
    activeName.value = 'fourth'
  } else if (tab === 'fivth') {
    activeName.value = 'fivth'
  } else if (tab === 'sixth') {
    activeName.value = 'sixth'
  }
}

const handlerSort = (staus) => {
  if (staus === 0) {
    recentContent.value.sort((a, b) => {
      return (new Date(a.createTime) - new Date(b.createTime)) * -1
    })
  } else if (staus === 1) {
    recentContent.value.sort((a, b) => {
      console.log(a, b)
      return (a.historyPeopleCount - b.historyPeopleCount) * -1
    })
  } else if (staus === 2) {
    recentContent.value.sort((a, b) => {
      return (a.collect - b.collect) * -1
    })
  }
}
</script>

<style scoped lang="scss">
.main {
  width: 80%;
  margin-left: 10%;
  margin-top: 20px;
  display: flex;
}
.left-card {
  width: 32%;
  border-radius: 3px;
}
.right-card {
  width: 66%;
  margin-left: 2%;
  background: #fff;
  border-radius: 3px;
  max-height: 770px;
  padding: 10px;
  overflow-y: auto;
}

.title {
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px #a7a7a7 solid;
}

.tag {
  display: flex;
  height: 40px;
  line-height: 40px;
  color: #606060;
  font-size: 14px;
}

.icon {
  width: 30px;
}

.year {
  background: rgba(214, 214, 214, 0.2);
  height: 45px;
  padding: 10px;
  border-radius: 2px;
  margin-bottom: 10px;
}

.notice {
  margin-right: 10px;
  width: 200px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.menu {
  width: 35px;
  text-align: center;
  margin: 20px 15px 10px 15px;
  padding: 8px 0;
}

.menu:hover {
  color: #15cbf3;
  cursor: pointer;
}

.active {
  color: #15cbf3;
  border-bottom: 2px #15cbf3 solid;
}
</style>
